<!--
  * @Description: 职位详情
  * @Author: rcc
  * @Date: 2024-08-06 18:37:03
  * @FilePath: /rc-recruitment/pages/office/home/home.vue
-->

<template>
  <view class="p-h24">
    <RcNavigation title="职位详情" />

    <view class="section m-t30">
      <view class="p-v30">
        <view class="flex p-h20">
          <text class="flex-1 text-700-140">{{ office?.title }}</text>
          <text class="text-700-534">{{ office?.money_range }}</text>
        </view>
        <view class="flex m-t20 p-h20">
          <image class="square-20" src="@/static/images/public/show.png" />
          <text class="m-l10 text-400-328">{{ office?.city }} · {{ office?.area }}</text>
          <text class="flex-1 text-c text-400-328">{{ office?.lowest_education }} | {{
            getWorkTimesLabel(office?.work_year) }}</text>
          <text class="text-400-324">{{ timeFormat(office?.createtime * 1000) }}发布</text>
        </view>
      </view>

      <view class="firm flex p-h20 p-v30" @click="toCompanyPage">
        <image class="cover" :src="genStaticUrl(office?.company.images?.split(',')[0])" mode="aspectFill" />
        <view class="flex-1 flex-d-lc p-h20">
          <text class="text-700-130">{{ office?.company.title }}</text>
          <text class="m-t20 text-400-526">今日活跃</text>
        </view>
        <image class="square-20" src="@/static/images/public/show.png" />
        <text class="m-l10 text-500-424">{{ office?.read_num }}次</text>
      </view>
    </view>

    <view class="label-view m-t40 p-l20">
      <text class="text-700-132">职位描述</text>
    </view>

    <view class="section m-t20">
      <view class="flex-d-lc p-a20">
        <text class="text-400-128">
          {{ office?.content }}
        </text>
      </view>
      <!--
        <view class="flex-d-lc p-h20 p-v20">
        <text class="text-700-128">岗位职责：</text>
        <text class="m-t20 text-400-128">
        {{ office?.content }}
        </text>
        </view>
        <view class="line" />
        <view class="flex-d-lc p-h20 p-v20">
        <text class="text-700-128">任职条件：</text>
        <text class="m-t20 text-400-128">
        1、限女生，年龄18-28岁;形象气质优；
        2、品行端正，能吃苦耐劳，有收银员经验者优先录取；
        3、有收银经验，能准确无误的收银找零，会简单的电脑操作。
        </text>
        </view>
      -->
    </view>

    <view class="section m-t20 p-h20 p-v20">
      <view class="text-700-128">福利待遇：</view>
      <view class="flex m-t20">
        <view v-for="(item, index) in getTags(office?.fringe)" :key="index" class="tag text-400-526">
          {{ item }}
        </view>
      </view>
    </view>

    <view class="section m-t20 p-h20 p-v20">
      <view class="text-700-128">工作地点：</view>
      <view class="flex m-t20">
        <text class="flex-1 text-400-328">{{ office?.city }}·{{ office?.area }}·{{ office?.address }}</text>
        <image class="square-22" src="@/static/images/public/arrow-1.png" />
      </view>
    </view>

    <RcOffice />
    <RcPanel v-if="office" :position="office" @refresh="getDetails" />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { Office } from '@/types/api.d.ts'
import { formatQuery, genStaticUrl, timeFormat } from '@/utils/utils'
import RcPanel from './components/panel.vue'
import RcOffice from './components/office.vue'
import RcNavigation from '@/components/navigation.vue'
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
onShareAppMessage(() => {
  return {
		title:`${office.value?.title}正在招人，点击投递`,
    path: `/pages/office/home/home?id=${positionId.value}`
  }
})
onShareTimeline(() => {
  return {
		title:`${office.value?.title}正在招人，点击投递`,
    path: `/pages/office/home/home?id=${positionId.value}`
  }
})
import { useCommonStore } from '@/stores/user'
const { getWorkTimesLabel } = useCommonStore()
interface RouteQuery {
  id: string
}

const positionId = ref('')

const office = ref<Office | null>(null)

onLoad((option) => {
  initParams(option as RouteQuery)

  getDetails(true)
})

const getTags = (value: string) => {
  return value?.split(',') ?? []
}

// 传参初始化
const initParams = (option: RouteQuery) => {
  positionId.value = option.id
}

const getDetails = async (showLoading = false) => {
  if (showLoading) {
    uni.showLoading({ title: '加载中...', mask: true })
  }

  const params = { id: positionId.value }

  const res = await uni.$u.get<Office>('/position/info', params)

  if (res.code === 1) {
    office.value = res.data
  }

  if (showLoading) {
    uni.hideLoading()
  }
}

const toCompanyPage = () => {
  const params = { id: office.value?.company.id }

  uni.navigateTo({ url: formatQuery('/pages/office/firm/firm', params) })
}
</script>

<style lang="scss">
page {
  background-color: $page-color-3;
}
</style>

<style lang="scss" scoped>
.section {
  border-radius: 20rpx;
  background-color: $bg-color-1;

  .firm {
    border-top: 1rpx solid $border-color-4;

    .cover {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
    }
  }

  .line {
    border-top: 1rpx solid $border-color-4;
  }

  .tag {
    height: 50rpx;
    margin-right: 20rpx;
    padding: 0 16rpx;
    line-height: 50rpx;
    background: #DCE9FF;
    border-radius: 6rpx;
  }
}

.label-view {
  border-left: 8rpx solid $border-color-1;
}
</style>
